//################################
// 版权所有：鸽子游戏俱乐部
// 系统名称：鸽子游戏俱乐部-移动版
// 文件名称：firstpageTabBar.js
// 创建时间：2017年04月26日
// 创建人员：Lemo
// 功能说明：firstpage tabbar
//################################

'use strict';

import React, {Component, PropTypes} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableWithoutFeedback,
} from 'react-native';

import Colors from '../../common/colors';

class FirstpageTabBar extends Component {
    static propTypes = {
		goToPage: React.PropTypes.func,
        activeTab: React.PropTypes.number,
        tabs: React.PropTypes.array,
	}

    constructor(props) {
        super(props);
    }

    onPress(i) {
        if (this.props.activeTab !== i) {
            this.props.goToPage(i);
        }
    }

    render() {
        return (
            <View style={[styles.tabs, this.props.style, ]}>
                {
                    this.props.tabs.map((tab, i) => {
                        return (
                            <TouchableWithoutFeedback key={tab} onPress={() => this.onPress(i)} style={styles.tab}>
                                <View style={[styles.innerview,{borderBottomWidth:1,borderLeftWidth:i!==0?1:0,
                                    borderLeftColor:'#EAEAEA',
                                    borderBottomColor:this.props.activeTab === i ? '#FFCC99' : '#EAEAEA'}]}>
                                    <Text style={{color:this.props.activeTab === i ? '#FFCC99' : '#909090'}}>{tab}</Text>
                                </View>
                            </TouchableWithoutFeedback>
                        );
                    })
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    tab: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingBottom: 10,
    },
    tabs: {
        height: 40,
        flexDirection: 'row',
    },
    innerview: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
});

export default FirstpageTabBar;